<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 100px; height:100px;background-color: red;border:1px solid #000; }
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		// alert( oDiv.style.width)		这种方法只能获取行间样式的宽，无法获取到css样式表内的值，所以弹出为空白

		setInterval(function(){
			//oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
			//问题：offsetWidth = 样式宽 + paddding + border宽。所以会出现看似减1实则加1的情况

			//解决办法：
			//第一种：
			//oDiv.style.width = oDiv.clientWidth - 1 + 'px';		//oDiv.clientWidth = 样式宽 + padding 【一般】

			//第二种：把宽度写进行间样式内，然后再 oDiv.style.width = parseInt(oDiv.style.width)-1 + 'px'; 【不推荐使用】

			//第三种 ：利用getStyle获取样式宽度【推荐】
			//oDiv.style.width = parseInt( getStyle(oDiv, 'width')) - 1 + 'px';

			function getStyle( obj, attr ) {
				return obj.currenStyle ? obj.currenStyle[attr] : getComputedStyle(obj)[attr]
			}
			
			

		},30)
	}
	</script>
</head>
<body>
	<div id="div1" style="width:100px"></div>
</body>
</html>